<script lang="tsx" setup>
/**
 * 新增菜单
 */
import {defineDialogSheetForm, DialogSheetForm, ImgUpload, processRequest} from "@/framework"
import {nextTick, ref} from "vue"
import APIS from "@/apis"
import {ElMessage} from "element-plus"

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "confirm"): void
}>()

/**
 * 页面实例
 */
const dialogSheetFormModelRef = ref()
const form = defineDialogSheetForm<any>({
  title: "新增/编辑",
  width: 500,
  sheetForm: {
    labelWidth: "100px",
    required: ["name"],
    els: [
      {
        label: "菜单名称",
        eType: "el-input",
        prop: "name",
        props: {
          placeholder: "菜单名称",
          clearable: true
        }
      },
      {
        label: "菜单图标",
        renderFn(data: any) {
          /**
           * 监听修改
           */
          const handleChange = (value: any) => {
            data.icon = value
          }

          return <ImgUpload onChange={handleChange} data={data.icon} limit={1}/>
        }
      },
      {
        label: "排序",
        eType: "el-input-number",
        prop: "order",
        props: {
          placeholder: "排序",
          controls: true,
          min: 0,
          step: 2
        },
        style: {
          width: "100%"
        }
      },
      {
        label: "是否渲染",
        eType: "el-switch",
        prop: "isShow"
      },
      {
        label: "是否启用",
        eType: "el-switch",
        prop: "isEnable"
      },
      {
        label: "是否开启缓存",
        eType: "el-switch",
        prop: "isCache"
      },
      {
        label: "菜单地址",
        eType: "el-input",
        prop: "url",
        props: {
          placeholder: "菜单地址",
          clearable: true
        }
      },
      {
        label: "备注",
        eType: "el-input",
        prop: "remark",
        props: {
          placeholder: "备注",
          type:"textarea",
          rows:3
        }
      }
    ]
  }
})

/**
 * 显示
 */
const isEdit = ref()
const show = (params: any) => {
  isEdit.value = params.isEdit
  if (params.isEdit) {
    dialogSheetFormModelRef.value.editForm()
    nextTick(() => {
      dialogSheetFormModelRef.value.setFormData(params.data)
    })
  } else {
    dialogSheetFormModelRef.value.addForm()
    nextTick(() => {
      if (params.superiorId) {
        dialogSheetFormModelRef.value.setFormData({
          superiorId: params.superiorId,
          show: true
        })
      } else {
        dialogSheetFormModelRef.value.setFormData({
          show: true
        })
      }
    })
  }
}

/**
 * 提交
 */
const handleSubmit = async (data: any) => {
  if (!data) return false
  if (isEdit.value) {
    await processRequest.put(APIS.MENU_BASE, {
      ...data
    })
    ElMessage.success("编辑成功")
    emit("confirm")
    dialogSheetFormModelRef.value.close()
  } else {
    await processRequest.post(APIS.MENU_BASE, {
      ...data
    })
    ElMessage.success("新增成功")
    emit("confirm")
    dialogSheetFormModelRef.value.close()
  }
}

/**
 * 暴露
 */
defineExpose({
  show
})
</script>

<template>
  <DialogSheetForm ref="dialogSheetFormModelRef" :dialogSheetFormModel="form" @submit="handleSubmit"/>
</template>

<style lang="scss" scoped>

</style>